<template>
    <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick">
    <el-tab-pane label="个人" name="个人"></el-tab-pane>
    <el-tab-pane label="企业" name="企业"></el-tab-pane>
  </el-tabs>
  <el-input
    placeholder="审核状态"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="签约人"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="手机号"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-select class="search" v-model="value" placeholder="请选择">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item"
      :value="item"
    ></el-option>
  </el-select>
  <el-button type="primary">查询</el-button>
  <el-button>重置</el-button>
  <el-table :data="contract.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; height: 550px">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="contract_number" label="合同编号"></el-table-column>
    <el-table-column prop="contract_name" label="合同名称"></el-table-column>
    <el-table-column prop="start_time" label="签订日期"></el-table-column>
    <el-table-column v-if="activeName=='个人'" prop="personname" label="签订人"></el-table-column>
    <el-table-column v-else prop="personname" label="法人"></el-table-column>
    <el-table-column v-if="activeName=='个人'"
      width="170"
      prop="idcard"
      label="身份证号码"
    ></el-table-column>
    <el-table-column v-else
      width="170"
      prop="idcard"
      label="签订企业"
    ></el-table-column>
    <el-table-column prop="end_time" label="到期时间"></el-table-column>
    <el-table-column prop="staut" label="合同状态"></el-table-column>
    <el-table-column prop="update_time" label="更新时间"></el-table-column>
    <el-table-column fixed="right" align="center" label="操作" min-width="250">
      <template #default="scope">
        <el-span
          style="font-size: 12px; color: #2561ef"
          @click="check(scope.row)"
        >
          查看
        </el-span>
        &emsp;
        <el-span v-if="scope.row.staut == '生效中'" style="font-size: 12px; color: #2561ef">物业交割</el-span>
        &emsp;
        <el-span v-if="scope.row.staut == '生效中'" style="font-size: 12px; color: #2561ef">终止合同</el-span>
        &emsp;
        <el-span v-if="scope.row.staut == '待签订'" style="font-size: 12px; color: #2561ef">续租</el-span>
        &emsp;
        <el-span v-if="scope.row.staut == '生效中'" style="font-size: 12px; color: #2561ef">退租</el-span>
        &emsp;
        <el-span style="font-size: 12px; color: #2561ef">删除</el-span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes=[5,10,15,20,30]
    :size="default"
    :disabled="disabled"
    :background="background"
    layout="total, prev, pager, next,sizes"
    :total="contract.length"
  />
      <!-- @size-change="handleSizeChange"
    @current-change="handleCurrentChange" -->
</template>
<script>
import { getData } from '@/api/contract'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  setup() {
    var activeName = ref("个人")
    const radiobtn = ref(0)
    var pageSize = ref(5)
    var currentPage = ref(1)
    var router = useRouter()
    const options = reactive(['待签订', '已签订', '已终止'])
    var contract = ref([])
    var value = ref('')
    onMounted(async () => {
      contract.value = await getData()
    })
    function check(row) {
      router.push({ path: '/Layout1/CheckAlready', query: row })
    }

    // const handleSizeChange = (number) => {
      
    // }
    // const handleCurrentChange = (number) => {
      
    // }
    return { contract, options, value, check ,pageSize,currentPage,radiobtn,activeName}
  },
}
</script>
<style>
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
.el-table__body tr:hover > td {
  background-color: #d7eff6 !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
</style>